<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>极客园PC端</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="极客园-开发文档">
    
    <link rel="preload" href="/document/assets/css/0.styles.c9fde802.css" as="style"><link rel="preload" href="/document/assets/js/app.9911b446.js" as="script"><link rel="preload" href="/document/assets/js/3.5cec4c48.js" as="script"><link rel="preload" href="/document/assets/js/5.3db35feb.js" as="script"><link rel="prefetch" href="/document/assets/js/1.bb7b219c.js"><link rel="prefetch" href="/document/assets/js/10.5de95cfc.js"><link rel="prefetch" href="/document/assets/js/11.a0e28b35.js"><link rel="prefetch" href="/document/assets/js/4.9359f99f.js"><link rel="prefetch" href="/document/assets/js/6.015274ee.js"><link rel="prefetch" href="/document/assets/js/7.6b4f86a1.js"><link rel="prefetch" href="/document/assets/js/8.4cafca16.js"><link rel="prefetch" href="/document/assets/js/9.e310b536.js">
    <link rel="stylesheet" href="/document/assets/css/0.styles.c9fde802.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/document/" class="home-link router-link-active"><img src="/document/hero.png" alt="" class="logo"> <!----></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/document/guide/01-pc.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  PC端项目
</a></div><div class="nav-item"><a href="/document/guide/02-vuex.html" class="nav-link">
  Vuex学习
</a></div><div class="nav-item"><a href="/document/guide/03-mobile.html" class="nav-link">
  M端项目
</a></div> <a href="https://gitee.com/zhoushugang/" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/document/guide/01-pc.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  PC端项目
</a></div><div class="nav-item"><a href="/document/guide/02-vuex.html" class="nav-link">
  Vuex学习
</a></div><div class="nav-item"><a href="/document/guide/03-mobile.html" class="nav-link">
  M端项目
</a></div> <a href="https://gitee.com/zhoushugang/" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>极客园PC端</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/document/guide/01-pc.html#第一章-项目起步" class="sidebar-link">第一章：项目起步</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-项目介绍" class="sidebar-link">01-项目介绍</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-使用技术" class="sidebar-link">02-使用技术</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_03-创建项目" class="sidebar-link">03-创建项目</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_04-调整目录" class="sidebar-link">04-调整目录</a></li></ul></li><li><a href="/document/guide/01-pc.html#第二章-项目架构" class="sidebar-link">第二章：项目架构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-使用element-ui" class="sidebar-link">01-使用element-ui</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-使用vue-router" class="sidebar-link">02-使用vue-router</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_03-约定路由" class="sidebar-link">03-约定路由</a></li></ul></li><li><a href="/document/guide/01-pc.html#第三章-登录模块" class="sidebar-link">第三章：登录模块</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-登录-路由与组件" class="sidebar-link">01-登录-路由与组件</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-登录-基础布局" class="sidebar-link">02-登录-基础布局</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_03-登录-绘制表单" class="sidebar-link">03-登录-绘制表单</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_04-登录-基本的表单校验" class="sidebar-link">04-登录-基本的表单校验</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_05-登录-自定义表单校验" class="sidebar-link">05-登录-自定义表单校验</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_06-登录-整体表单校验" class="sidebar-link">06-登录-整体表单校验</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_07-登录-挂载axios" class="sidebar-link">07-登录-挂载axios</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_08-登录-进行登录" class="sidebar-link">08-登录-进行登录</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_09-登录-操作token工具" class="sidebar-link">09-登录-操作token工具</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_10-登录-访问控制" class="sidebar-link">10-登录-访问控制</a></li></ul></li><li><a href="/document/guide/01-pc.html#第四章-概览页面" class="sidebar-link">第四章：概览页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_00-代码片段" class="sidebar-link">00-代码片段</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-概览-路由与布局组件" class="sidebar-link">01-概览-路由与布局组件</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-概览-布局组件架子" class="sidebar-link">02-概览-布局组件架子</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_03-概览-布局组件菜单" class="sidebar-link">03-概览-布局组件菜单</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_04-概览-路由与概览组件" class="sidebar-link">04-概览-路由与概览组件</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_05-概览-获取个人信息" class="sidebar-link">05-概览-获取个人信息</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_06-概览-请求携带token" class="sidebar-link">06-概览-请求携带token</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_07-概览-拦截token失效" class="sidebar-link">07-概览-拦截token失效</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_08-概览-退出功能" class="sidebar-link">08-概览-退出功能</a></li></ul></li><li><a href="/document/guide/01-pc.html#第五章-内容管理" class="sidebar-link">第五章：内容管理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-内容管理-路由与组件" class="sidebar-link">01-内容管理-路由与组件</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-内容管理-开启菜单路由" class="sidebar-link">02-内容管理-开启菜单路由</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_03-内容管理-筛选区域" class="sidebar-link">03-内容管理-筛选区域</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_04-内容管理-结果区域" class="sidebar-link">04-内容管理-结果区域</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_05-内容管理-渲染频道选项" class="sidebar-link">05-内容管理-渲染频道选项</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_06-内容管理-渲染简单列" class="sidebar-link">06-内容管理-渲染简单列</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_07-内容管理-渲染复杂列" class="sidebar-link">07-内容管理-渲染复杂列</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_08-内容管理-实现分页功能" class="sidebar-link">08-内容管理-实现分页功能</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_09-内容管理-实现筛选功能" class="sidebar-link">09-内容管理-实现筛选功能</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_10-内容管理-实现删除功能" class="sidebar-link">10-内容管理-实现删除功能</a></li></ul></li><li><a href="/document/guide/01-pc.html#第六章-发布文章" class="sidebar-link">第六章：发布文章</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-发布文章-路由与组件" class="sidebar-link">01-发布文章-路由与组件</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-发布文章-基础布局" class="sidebar-link">02-发布文章-基础布局</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_03-发布文章-频道组件-功能实现" class="sidebar-link">03-发布文章-频道组件-功能实现</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_04-发布文章-频道组件-双向绑定" class="sidebar-link">04-发布文章-频道组件-双向绑定</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_05-发布文章-封面-上传组件" class="sidebar-link">05-发布文章-封面-上传组件</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_06-发布文章-封面-完成上传" class="sidebar-link">06-发布文章-封面-完成上传</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_07-发布文章-富文本使用" class="sidebar-link">07-发布文章-富文本使用</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_08-发布文章-基本校验" class="sidebar-link">08-发布文章-基本校验</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_09-发布文章-特殊校验" class="sidebar-link">09-发布文章-特殊校验</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_10-发布文章-进行提交" class="sidebar-link">10-发布文章-进行提交</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_11-修改文章-填充数据" class="sidebar-link">11-修改文章-填充数据</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_12-修改文章-路由组件钩子" class="sidebar-link">12-修改文章-路由组件钩子</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_13-修改文章-进行修改" class="sidebar-link">13-修改文章-进行修改</a></li></ul></li><li><a href="/document/guide/01-pc.html#第七章-项目收尾" class="sidebar-link">第七章：项目收尾</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_01-项目打包" class="sidebar-link">01-项目打包</a></li><li class="sidebar-sub-header"><a href="/document/guide/01-pc.html#_02-项目总结" class="sidebar-link">02-项目总结</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="极客园pc端"><a href="#极客园pc端" class="header-anchor">#</a> 极客园PC端</h1> <h2 id="第一章-项目起步"><a href="#第一章-项目起步" class="header-anchor">#</a> 第一章：项目起步</h2> <h3 id="_01-项目介绍"><a href="#_01-项目介绍" class="header-anchor">#</a> 01-项目介绍</h3> <blockquote><p>目标：了解项目背景，了解项目功能。</p></blockquote> <p>项目背景：</p> <ul><li>它对标 CSDN 博客园 等竞品，致力成为全球知名的IT技术交流平台，它包含 技术文章，问答内容，视频解答 的专业IT资讯平台，它提供原创，优质，完整内容的专业IT社区。它是 <code>极客园</code> IT资讯社区。</li></ul> <p>项目功能：</p> <ul><li><code>极客园-个人端PC</code> 是PC桌面web个人自媒体管理端</li> <li>主要功能有：
<ul><li>登录</li> <li>首页</li> <li>内容管理（筛选，删除）</li> <li>发布文章（包含编辑文章）</li></ul></li></ul> <p>项目物料：http://geek.itheima.net</p> <p><strong>总结：</strong> 我们知道项目的大致功能即可。</p> <h3 id="_02-使用技术"><a href="#_02-使用技术" class="header-anchor">#</a> 02-使用技术</h3> <blockquote><p>目标：了解会使用到的技术</p></blockquote> <p>开发依赖大致如下：</p> <ul><li>基础环境：<code>nodejss12+</code> <code>vscode</code> <code>vuecli4.x</code></li> <li>配套工具：<code>eslint</code> <code>babel</code> <code>less</code></li> <li>使用技术：<code>vue2.6.12</code> <code>element-ui</code> <code>vue-router</code></li></ul> <p>项目中的解决方案：</p> <ul><li>使用vue-cli创建vue单页应用解决方案</li> <li>使用vue-router实现前端路由解决方案</li> <li>使用element-ui快速搭建PC界面解决方案</li></ul> <p><strong>总结：</strong> 我们大概知道用了那些东西即可。</p> <h3 id="_03-创建项目"><a href="#_03-创建项目" class="header-anchor">#</a> 03-创建项目</h3> <blockquote><p>目标：知道如何使用vue-cli创建项目</p></blockquote> <p>大致步骤：</p> <ul><li>在某个目录打开命令行工具输入创建项目的命令</li> <li>安装项目需求选择具体的工具，然后等待创建吧</li> <li>最后进入创建好的项目，启动项目即可</li></ul> <p>具体如下：</p> <ul><li>执行创建命令</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>vue create geek-client-pc
</code></pre></div><ul><li>选中自定义创建</li></ul> <p><img src="" alt="1622440144872"></p> <ul><li>选择Vue版本，依赖Babel降级ES6语法，使用css预处理器，使用代码风格校验。</li></ul> <p><img src="" alt="1625019450919"></p> <ul><li>选择vue2.0版本</li></ul> <p><img src="" alt="1622440660281"></p> <ul><li>是否使用历史模式API，输入 n</li></ul> <p><img src="" alt="1622440752792"></p> <ul><li>选择less这种css预处理器</li></ul> <p><img src="" alt="1622440811661"></p> <ul><li>选择 通用语法风格配置</li></ul> <p><img src="" alt="1622440877508"></p> <ul><li>语法风格校验的时机，保存代码校验，提交代码校验且自动修复。</li></ul> <p><img src="/document/assets/img/1622441060425.952868fa.png" alt="1622441060425"></p> <ul><li>选择使用不同的配置文件对于所依赖工具</li></ul> <p><img src="/document/assets/img/1622441142876.091cead7.png" alt="1622441142876"></p> <ul><li>是否记录此次操作记录，输入 n</li></ul> <p><img src="" alt="1622441203780"></p> <ul><li>最后等待安装即可，安装完毕进入项目目录，执行 <code>npm run serve</code> 即可启动项目。</li></ul> <p><img src="" alt="1625019627355"></p> <p><strong>总结：</strong> 我们可以使用vuecli根据自己项目需求创建合适的项目。</p> <h3 id="_04-调整目录"><a href="#_04-调整目录" class="header-anchor">#</a> 04-调整目录</h3> <blockquote><p>目标：根据项目功能调整下目录结构</p></blockquote> <p>大致步骤：</p> <ul><li>配置文件解释说明</li> <li>调整src下目录结构</li></ul> <p>落地内容：</p> <ul><li>根目录和配置文件。都是自动生成的，了解作用即可</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>├─node_modules
├─public
├─src
├─.browserslistrc     # 适配浏览器列表
├─.editorconfig       # 提供给编辑器的配置
├─.eslintrc.js        # eslint代码风格配置
├─.gitignore          # git忽略文件配置
├─.babel.config.js    # babelES降级配置
├─package-lock.json   # 包下载版本说明文件
├─package.json        # 项目包说明文件
├─README.md           # 说明MD文件
</code></pre></div><ul><li>src 目录结构如下，仅供参考 （分模块的思维才重要）</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>├─assets           # 项目资源
│  ├─images          # 图片 
│  └─styles          # less代码
├─components       # 全局组件，通用组件
├─router           # 路由
├─utils            # 工具
└─views            # 路由组件（页面）
    ├─home            # 首页
    ├─login           # 登录
    ├─article         # 内容管理
    └─publish         # 发布文章
</code></pre></div><p><strong>总结：</strong> 做好开发前的准备，调整下项目结构。</p> <h2 id="第二章-项目架构"><a href="#第二章-项目架构" class="header-anchor">#</a> 第二章：项目架构</h2> <h3 id="_01-使用element-ui"><a href="#_01-使用element-ui" class="header-anchor">#</a> 01-使用element-ui</h3> <blockquote><p>目标：引入element-ui组件库，能够在项目中使用它。</p></blockquote> <p>​		在pc管理系统开发过程中，需要创建静态页面，如果自己去编写，成本比较高。使用第三方的UI库，来快速构建页面会是最好选择。我们使用的是基于vue最流行的UI组件库 <code>element-ui</code> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer">饿了么UI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，它提供了网页开发中常用的功能，而且基于vue封装成了组件，我们只需参考官方提供的使用文档来使用即可。</p> <p>使用步骤：</p> <ul><li><p>安装 <code>npm i element-ui</code></p></li> <li><p>导入</p> <ul><li>完整引入（建议学习阶段使用，简单粗暴）</li> <li>按需引入（建议开发阶段使用，优化体积）</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 完整引入，main.js写入以下代码</span>
<span class="token keyword">import</span> ElementUI <span class="token keyword">from</span> <span class="token string">'element-ui'</span>
<span class="token keyword">import</span> <span class="token string">'element-ui/lib/theme-chalk/index.css'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementUI<span class="token punctuation">)</span>
</code></pre></div></li> <li><p>使用 <code>App.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>成功按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ul> <p>小结一下：</p> <ul><li>饿了么UI是什么？
<ul><li>是一个基于vue的UI组件库</li></ul></li> <li>如果使用饿了么UI？
<ul><li>安装，完整导入，全局使用。</li></ul></li></ul> <h3 id="_02-使用vue-router"><a href="#_02-使用vue-router" class="header-anchor">#</a> 02-使用vue-router</h3> <blockquote><p>目标：在项目中使用vue-router实现前端路由</p></blockquote> <p>使用步骤：</p> <ol><li><p>安装：<code>npm i vue-router</code></p></li> <li><p>引入：</p> <p>以前是在main.js完成的，但是路由相关代码会比较多，现在是在<code>src/router/index.js</code> 进行引入和配置。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
</code></pre></div></li> <li><p>注册：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span>
</code></pre></div></li> <li><p>初始化：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 路由规则</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>导出路由实例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre></div></li> <li><p>导入路由实例：<code>main.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// @是路径别名，代表 src</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'@/router'</span>
</code></pre></div></li> <li><p>挂载：<code>main.js</code></p> <div class="language-diff extra-class"><pre class="language-diff"><code>new Vue({
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> render: h =&gt; h(App),
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  router
</span></span>}).$mount('#app')
</code></pre></div></li></ol> <p>总结：安装使用vue-router，提取路由模块。</p> <h3 id="_03-约定路由"><a href="#_03-约定路由" class="header-anchor">#</a> 03-约定路由</h3> <blockquote><p>目的：约定好前端路由规则，什么路径渲染什么组件。</p></blockquote> <p>设计思路：</p> <p><img src="/document/assets/img/1625109377614.5f030399.png" alt="1625109377614"></p> <p>具体规则：</p> <table><thead><tr><th>路由路径</th> <th>路由对应组件（页面）</th> <th>路由等级</th></tr></thead> <tbody><tr><td>/login</td> <td>登录</td> <td>一级路由</td></tr> <tr><td>/</td> <td>首页</td> <td>一级路由</td></tr> <tr><td>├─ /</td> <td>概览页面</td> <td>二级路由</td></tr> <tr><td>├─ /article</td> <td>文章管理</td> <td>二级路由</td></tr> <tr><td>├─ /publish</td> <td>发布文章</td> <td>二级路由</td></tr></tbody></table> <p><strong>总结：</strong> 登录----&gt;首页，内容完整切换使用一级路由，概览，文章，发布，再Layout基础之上切换嵌套路由，二级路由切换。</p> <h2 id="第三章-登录模块"><a href="#第三章-登录模块" class="header-anchor">#</a> 第三章：登录模块</h2> <h3 id="_01-登录-路由与组件"><a href="#_01-登录-路由与组件" class="header-anchor">#</a> 01-登录-路由与组件</h3> <blockquote><p>目的：准备好登录组件，配置好路由。</p></blockquote> <p>组件：<code>src/views/login.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Login<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Login'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>路由：<code>src/router/index.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Login <span class="token keyword">from</span> <span class="token string">'@/views/login'</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code>const router = new VueRouter({
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> routes: [
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    { path: '/login', component: Login }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ]
</span></span>})
</code></pre></div><p>出口：<code>src/App.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_02-登录-基础布局"><a href="#_02-登录-基础布局" class="header-anchor">#</a> 02-登录-基础布局</h3> <blockquote><p>目的：完成登录页面基础布局</p></blockquote> <p>结构：<code>src/views/login/index.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-card</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../../assets/logo.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 表单 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-card</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>样式：</p> <p><code>src/views/login/index.vue</code></p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../../assets/login.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token selector">.el-card</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 440px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 380px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span><span class="token operator">-</span>50%<span class="token punctuation">,</span><span class="token operator">-</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 50px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token selector">.logo</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto 20px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>App.vue</code></p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>总结：el-card是饿了么UI卡片组件，组件根元素有class 类 .el-card</p> <h3 id="_03-登录-绘制表单"><a href="#_03-登录-绘制表单" class="header-anchor">#</a> 03-登录-绘制表单</h3> <blockquote><p>目的：使用el-form组件绘制登录表单</p></blockquote> <p>大致步骤：</p> <ul><li>先去阅读 el-form 组件的使用文档</li> <li>了解表单元素组件类型</li> <li>绘制表单</li></ul> <p>落的内容：<code>src/views/login.vue</code></p> <ul><li>el-form用法</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>1. el-form 是表单容器组件
2. el-form-item 是表单项组件，label可以设置表单元素文字说明，可以放置表单元素组件。
</code></pre></div><ul><li>el的表单元素组件</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>el-input  el-checkbox el-select el-radio 等等
</code></pre></div><ul><li>绘制表单</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入手机号<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入手机号<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-checkbox</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我已阅读并同意「用户协议」和「隐私条款」<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-checkbox</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>登 录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-less extra-class"><pre class="language-less"><code>    <span class="token selector">.el-form</span> <span class="token punctuation">{</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 0 20px<span class="token punctuation">;</span>
      <span class="token selector">.el-button</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre></div><p><strong>总结：</strong>  知道绘制表单用的是el-form,el-form-item和其他的表单元素组件。</p> <h3 id="_04-登录-基本的表单校验"><a href="#_04-登录-基本的表单校验" class="header-anchor">#</a> 04-登录-基本的表单校验</h3> <blockquote><p>目的：完成表单的基本校验</p></blockquote> <p>大致步骤：</p> <ul><li>先阅读element-ui的表单组件文档，找到校验功能总结方法</li> <li>明确下校验需求</li> <li>实践下校验功能</li></ul> <p>落的内容：<code>src/views/login.vue</code></p> <ul><li>校验方法</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>1. el-form  需要加上一个属性  model  通过这个属性绑定表单数据对象
2. el-form  需要加上一个属性  rules  通过这个属性绑定校验规则对象（定义校验逻辑）
3. el-from-item 需要加上一个属性 prop 通过这个属性来指定当前表单项使用的校验规则
4. 校验规则的名称需要和绑定表单数据中的字段名一致
5. 具体的校验规则可参考官方示例
</code></pre></div><ul><li>校验需求</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>手机号：必填，1开头，3-9之间，9个数字
验证码：必填，6个字符
</code></pre></div><ul><li>实践代码</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token comment">// 数据</span>
      form<span class="token operator">:</span> <span class="token punctuation">{</span>
        mobile<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
        code<span class="token operator">:</span> <span class="token string">''</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// 规则</span>
      rules<span class="token operator">:</span> <span class="token punctuation">{</span>
        mobile<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'请输入手机号'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        code<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'请输入验证码'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> len<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'验证码6个字符'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      &lt;el-form :model=&quot;form&quot; :rules=&quot;rules&quot;&gt;
</span><span class="token prefix inserted">+</span><span class="token line">        &lt;el-form-item prop=&quot;mobile&quot;&gt;
</span><span class="token prefix inserted">+</span><span class="token line">          &lt;el-input v-model=&quot;form.mobile&quot; placeholder=&quot;请输入手机号&quot;&gt;&lt;/el-input&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;el-form-item prop=&quot;code&quot;&gt;
</span><span class="token prefix inserted">+</span><span class="token line">          &lt;el-input v-model=&quot;form.code&quot; placeholder=&quot;请输入验证码&quot;&gt;&lt;/el-input&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-checkbox :value=&quot;true&quot;&gt;我已阅读并同意「用户协议」和「隐私条款」&lt;/el-checkbox&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-button type=&quot;primary&quot;&gt;登 录&lt;/el-button&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-form&gt;
</span></span></code></pre></div><p><strong>总结：</strong>  el-form上绑定model指定表单数据对象，绑定rules指定表单校验对象，el-form-item的prop属性指定当前表单项使用校验规则中的  xxx 规则去校验表单对象中的 xxx 数据。</p> <h3 id="_05-登录-自定义表单校验"><a href="#_05-登录-自定义表单校验" class="header-anchor">#</a> 05-登录-自定义表单校验</h3> <blockquote><p>目的：完成自己定义校验规则</p></blockquote> <p>大致步骤：</p> <ul><li>先阅读element-ui的表单组件文档，找到自定校验规律</li> <li>实践自定义校验</li></ul> <p>落地内容：<code>src/views/login.vue</code></p> <ul><li>自定义校验规律</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>1. 在 校验规则 对象中，  validator 是用来指定自定义校验函数
2. 这个 自定义校验函数 必须先声明，在data的return之前声明即可
3. 自定义校验函数三个参数：rule  value  callback
3.1 rule  当前字段对应的校验对象  不会使用
3.2 value 当前字符段对应的值    我们需要校验这个值
3.3 callback 失败---&gt;callback(new Error('校验失败的提示'))  成功----&gt;callback()
</code></pre></div><ul><li>自定义校验实践</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> data () {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    const checkMobile = (rule, value, callback) =&gt; {
</span><span class="token prefix inserted">+</span><span class="token line">      if (/^1[3-9]\d{9}$/.test(value)) {
</span><span class="token prefix inserted">+</span><span class="token line">        callback()
</span><span class="token prefix inserted">+</span><span class="token line">      } else {
</span><span class="token prefix inserted">+</span><span class="token line">        callback(new Error('手机号格式不对'))
</span><span class="token prefix inserted">+</span><span class="token line">      }
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   return {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 数据
</span><span class="token prefix unchanged"> </span><span class="token line">     form: {
</span><span class="token prefix unchanged"> </span><span class="token line">       mobile: '',
</span><span class="token prefix unchanged"> </span><span class="token line">       code: ''
</span><span class="token prefix unchanged"> </span><span class="token line">     },
</span><span class="token prefix unchanged"> </span><span class="token line">     // 规则
</span><span class="token prefix unchanged"> </span><span class="token line">     rules: {
</span><span class="token prefix unchanged"> </span><span class="token line">       mobile: [
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          { required: true, message: '请输入手机号', trigger: 'blur' },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         { validator: checkMobile, trigger: 'blur' }
</span><span class="token prefix unchanged"> </span><span class="token line">       ],
</span><span class="token prefix unchanged"> </span><span class="token line">       code: [
</span><span class="token prefix unchanged"> </span><span class="token line">         { required: true, message: '请输入验证码', trigger: 'blur' },
</span><span class="token prefix unchanged"> </span><span class="token line">         { len: 6, message: '验证码6个字符', trigger: 'blur' }
</span><span class="token prefix unchanged"> </span><span class="token line">       ]
</span><span class="token prefix unchanged"> </span><span class="token line">     }
</span><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span></code></pre></div><p><strong>总结：</strong> 使用validator属性可以指定一个校验函数，再校验函数中来校验value数据，调用callback代表校验完成，传入错误对象代表失败，不传代表成功。</p> <h3 id="_06-登录-整体表单校验"><a href="#_06-登录-整体表单校验" class="header-anchor">#</a> 06-登录-整体表单校验</h3> <blockquote><p>目的：对整个表单进行校验</p></blockquote> <p>大致步骤：</p> <ul><li>先阅读element-ui的表单组件文档，找到整体表单校验方式</li> <li>实践整体表单校验</li></ul> <p>落地内容：<code>src/views/login.vue</code></p> <ul><li>整体表单校验方式</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>1. 通过调组件实例的函数 validate 进行整体校验
2. validate(function(valid)<span class="token punctuation">{</span> // valid 为 true 校验成功 <span class="token punctuation">}</span>)
3. 通过ref绑定el-form，然后this.$refs获取组件实例，再去调用validate函数
</code></pre></div><ul><li>实践整体表单校验，点击登录按钮校验</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rules<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login()<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>登 录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">login</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">valid</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>valid<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div><p><strong>总结：</strong> 使用ref=&quot;xxx&quot;绑定el-form组件，使用this.$refs.xxx.validate()校验整体表单。</p> <h3 id="_07-登录-挂载axios"><a href="#_07-登录-挂载axios" class="header-anchor">#</a> 07-登录-挂载axios</h3> <blockquote><p>目的：创建一个axios实现挂载再Vue原型上，将来再任何vue组件下可通过this访问，方便开发。</p></blockquote> <p>大致步骤：</p> <ul><li>安装axios</li> <li>创建axios</li> <li>挂载axios</li></ul> <p>落地代码：</p> <ul><li>安装axios</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i axios
</code></pre></div><ul><li>创建axios <code>src/utils/http.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span>

<span class="token keyword">const</span> instance <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  baseURL<span class="token operator">:</span> <span class="token string">'http://geek.itheima.net/'</span><span class="token punctuation">,</span>
  timeout<span class="token operator">:</span> <span class="token number">5000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> instance

</code></pre></div><ul><li>挂载axios <code>src/main.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> http <span class="token keyword">from</span> <span class="token string">'@/utils/http'</span>

<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$http <span class="token operator">=</span> http
</code></pre></div><p><strong>总结：</strong> 创建一个axios实例通过prototype挂载到Vue上，所有vue实例可以访问。</p> <h3 id="_08-登录-进行登录"><a href="#_08-登录-进行登录" class="header-anchor">#</a> 08-登录-进行登录</h3> <blockquote><p>目的：进行登录实现</p></blockquote> <p>大致步骤：</p> <ul><li>发起登录请求</li> <li>成功：保存token在本地，跳转首页</li> <li>失败：提示错误消息</li></ul> <p>落地代码：</p> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">login</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">valid</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">try</span> <span class="token punctuation">{</span>
           <span class="token comment">// 请求</span>
            <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/v1_0/authorizations'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">)</span>
            <span class="token comment">// 成功</span>
            localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'geek-client-pc-store'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// 失败</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'登录失败'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><p><code>try catch</code> 的用法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">try</span><span class="token punctuation">{</span>
    <span class="token comment">// 写可能出现异常的代码片段</span>
<span class="token punctuation">}</span><span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果出现异常执行catch函数</span>
    <span class="token comment">// e 就是错误对象</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>总结：</strong> 发起登录请求，成功后存储token后跳转到首页。</p> <h3 id="_09-登录-操作token工具"><a href="#_09-登录-操作token工具" class="header-anchor">#</a> 09-登录-操作token工具</h3> <blockquote><p>目标：封装一个操作本地token的工具模块auth.js</p></blockquote> <p>大致步骤：</p> <ul><li>约定好存储数据的key定义成常量</li> <li>提供一个获取token函数</li> <li>提供一个设置token函数</li> <li>提供一个删除token函数</li></ul> <p>落地代码：</p> <ul><li>定义工具 <code>src/utils/auth.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 操作认证信息token的工具函数</span>
<span class="token keyword">const</span> <span class="token constant">KEY</span> <span class="token operator">=</span> <span class="token string">'geek-client-pc-store'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// 获取token</span>
  <span class="token function">getToken</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 设置token</span>
  <span class="token function">setToken</span> <span class="token punctuation">(</span><span class="token parameter">token</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 删除token</span>
  <span class="token function">delToken</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>使用工具 <code>src/views/login.vue</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> auth <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           // 请求
</span><span class="token prefix unchanged"> </span><span class="token line">           const res = await this.$http.post('/v1_0/authorizations', this.form)
</span><span class="token prefix unchanged"> </span><span class="token line">           // 成功
</span><span class="token prefix unchanged"> </span><span class="token line">           // localStorage.setItem('geek-client-pc-store', res.data.data.token)
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">            auth.setToken(res.data.data.token)
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           this.$router.push('/')
</span></span></code></pre></div><h3 id="_10-登录-访问控制"><a href="#_10-登录-访问控制" class="header-anchor">#</a> 10-登录-访问控制</h3> <blockquote><p>目的：实现除去登录页面，其他页面访问都需要判断是否存储token，没有拦截到登录</p></blockquote> <p>大致步骤：</p> <ul><li>弄清楚访问控制的逻辑</li> <li>使用路由导航守卫实现</li></ul> <p>落地代码：</p> <ul><li>弄清楚访问控制的逻辑</li></ul> <p><img src="/document/assets/img/1625128481411.d9cc7f03.png" alt="1625128481411"></p> <ul><li>使用路由导航守卫实现 <code>src/router/index.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> auth <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 获取token</span>
  <span class="token keyword">const</span> token <span class="token operator">=</span> auth<span class="token punctuation">.</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 不是访问登录，有没有token，跳转登录页面</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">!==</span> <span class="token string">'/login'</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>token<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
  <span class="token comment">// 其他情况放行</span>
  <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>总结：使用router的breforeEach进行访问权限控制。</p> <h2 id="第四章-概览页面"><a href="#第四章-概览页面" class="header-anchor">#</a> 第四章：概览页面</h2> <h3 id="_00-代码片段"><a href="#_00-代码片段" class="header-anchor">#</a> 00-代码片段</h3> <blockquote><p>目的：使用vue快捷方式创建vue模版组件</p></blockquote> <p>步骤：</p> <ul><li><code>ctrl + shift + p</code>  打开功能搜索框</li> <li>输入 <code>代码片段</code> 搜索功能 ，找到如下功能点击它</li></ul> <p><img src="" alt="1626060260560"></p> <ul><li>点击新建代码片段</li></ul> <p><img src="/document/assets/img/1626060308081.b65a09f5.png" alt="1626060308081"></p> <ul><li>将下面的代码复制到文件</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	<span class="token property">&quot;vue-component&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token property">&quot;scope&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;prefix&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;body&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
			<span class="token string">&quot;&lt;template&gt;&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;  &lt;div class=\&quot;container\&quot;&gt;&lt;/div&gt;&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;&lt;/template&gt;&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;&lt;script&gt;&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;export default {&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;  name: ''&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;}&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;&lt;/script&gt;&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;&lt;style scoped lang=\&quot;less\&quot;&gt;&lt;/style&gt;&quot;</span><span class="token punctuation">,</span>
			<span class="token string">&quot;&quot;</span>
		<span class="token punctuation">]</span><span class="token punctuation">,</span>
		<span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;生成一个vue单文件组件&quot;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="/document/assets/img/1626060373353.416a4bb2.png" alt="1626060373353"></p> <ul><li>最后再vue文件输入 <code>vue</code> 提示代码生成方式</li></ul> <h3 id="_01-概览-路由与布局组件"><a href="#_01-概览-路由与布局组件" class="header-anchor">#</a> 01-概览-路由与布局组件</h3> <p>组件：<code>src/views/Layout.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Layout<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Layout'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>路由：<code>src/router/index.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'@/views/Layout'</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code>const router = new VueRouter({
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> routes: [
</span><span class="token prefix unchanged"> </span><span class="token line">   { path: '/login', component: Login },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    {path: '/',component: Layout}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ]
</span></span>})
</code></pre></div><h3 id="_02-概览-布局组件架子"><a href="#_02-概览-布局组件架子" class="header-anchor">#</a> 02-概览-布局组件架子</h3> <blockquote><p>目标：使用element-ui布局容器准备Layout组件的页面架子</p></blockquote> <p>大致步骤：</p> <ul><li>找到element-ui文档中的布局容器组件，找到对应的结构代码。</li> <li>在Layout.vue组件中使用代码，添加结构和样式</li></ul> <p>落地代码：<code>src/views/Layout.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-container</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-aside</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-aside</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-container</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-header</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span>20px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>用户名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-unlock<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>退出<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-header</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-main</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-main</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-container</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-container</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Layout'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.container</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token selector">;
  .el-aside</span> <span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #023<span class="token selector">;
    .logo</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
      <span class="token property">background</span><span class="token punctuation">:</span>#023 <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../assets/logo.png<span class="token punctuation">)</span></span> no-repeat center / 160px auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.el-header</span> <span class="token punctuation">{</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #ddd<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h3 id="_03-概览-布局组件菜单"><a href="#_03-概览-布局组件菜单" class="header-anchor">#</a> 03-概览-布局组件菜单</h3> <blockquote><p>目的：在左侧栏加上el-menu组件搭建菜单</p></blockquote> <p>大致步骤：</p> <ul><li>找到element-ui文档中的导航菜单组件，找到对应的结构代码。</li> <li>在Layout.vue组件中使用代码，改造成我们需要的菜单。</li></ul> <p>落的代码：</p> <ul><li>分析示例代码</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>1. el-menu 是导航菜单容器
2. el-menu-item 是菜单项
3. 如果有子级菜单使用 el-submenu 包裹 el-menu-item 组件，如果有分组 el-menu-item 外包裹 el-menu-item-group 组件
</code></pre></div><ul><li>使用导航菜单</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu</span>
        <span class="token attr-name">background-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#023<span class="token punctuation">&quot;</span></span>
        <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">border-right</span><span class="token punctuation">:</span>none</span><span class="token punctuation">&quot;</span></span></span>
        <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#fff<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">default-active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu-item</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-s-home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>数据概览<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu-item</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/article<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-document<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容管理<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu-item</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/publish<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-s-promotion<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发布文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>属性：</p> <ul><li>el-menu  ---&gt;  default-active 当前激活那个菜单项，值为el-menu-item的index的值。</li> <li>el-menu-item ---&gt; index  菜单项标识</li></ul> <p><strong>总结：</strong>  使用element-ui组件，先分析，再使用。诀窍：试一试。</p> <h3 id="_04-概览-路由与概览组件"><a href="#_04-概览-路由与概览组件" class="header-anchor">#</a> 04-概览-路由与概览组件</h3> <blockquote><p>目的：完成概览组件，完成二级路由配置，以及出口的配置。</p></blockquote> <p>组件：<code>src/home/index.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Home'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.home</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span>#f5f5f5 <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../../assets/chart.png<span class="token punctuation">)</span></span> no-repeat center / contain<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>路由：<code>src/router/index.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'@/views/home'</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code>const router = new VueRouter({
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> routes: [
</span><span class="token prefix unchanged"> </span><span class="token line">   { path: '/login', component: Login },
</span><span class="token prefix unchanged"> </span><span class="token line">   {
</span><span class="token prefix unchanged"> </span><span class="token line">     path: '/',
</span><span class="token prefix unchanged"> </span><span class="token line">     component: Layout,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      children: [
</span><span class="token prefix inserted">+</span><span class="token line">        { path: '/', component: Home }
</span><span class="token prefix inserted">+</span><span class="token line">      ]
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> ]
</span></span>})
</code></pre></div><p>出口：<code>src/views/Layout.vue</code></p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-main&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;router-view&gt;&lt;/router-view&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-main&gt;
</span></span></code></pre></div><h3 id="_05-概览-获取个人信息"><a href="#_05-概览-获取个人信息" class="header-anchor">#</a> 05-概览-获取个人信息</h3> <blockquote><p>目的：Layout.vue组件中需要登录用户的名称，需要调用接口获取个人信息。</p></blockquote> <p>大致步骤：</p> <ul><li>data中声明 用户数据 对象</li> <li>组件初始化获取个人信息，设置用户信息</li> <li>模版中使用 name 没有就使用 mobile</li></ul> <p>落地代码：<code>src/views/Layout.vue</code></p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      user<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'v1_0/user/profile'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>user <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-header&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;span style=&quot;margin-right:20px&quot;&gt;{{user.name||user.mobile}}&lt;/span&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-link icon=&quot;el-icon-unlock&quot; :underline=&quot;false&quot;&gt;退出&lt;/el-link&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-header&gt;
</span></span></code></pre></div><p><img src="" alt="1625198877293"></p> <p>由于我们请求的时候没有带上token请求后台，导致后台认为我们没有登录，响应401告诉你token失效或未传。</p> <p><strong>总结：</strong> 调用需要登录状态的后台接口是需要携带token的，下一节我们实现下携带token</p> <h3 id="_06-概览-请求携带token"><a href="#_06-概览-请求携带token" class="header-anchor">#</a> 06-概览-请求携带token</h3> <blockquote><p>目的：在请求前获取本地存储的token设置在请求头</p></blockquote> <p>大致步骤：</p> <ul><li>分析示例代码</li> <li>完成token携带</li></ul> <p>落地代码：<code>src/utils/http.js</code></p> <ul><li>分析-请求拦截器</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>// 添加请求拦截器
axios.interceptors.request.use(function (config) <span class="token punctuation">{</span>
    // 在发送请求之前做些什么
    return config;
  <span class="token punctuation">}</span>, function (error) <span class="token punctuation">{</span>
    // 对请求错误做些什么
    return Promise.reject(error);
  <span class="token punctuation">}</span>);
</code></pre></div><ul><li>使用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> auth <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> token <span class="token operator">=</span> auth<span class="token punctuation">.</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Bearer </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>token<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token keyword">return</span> config
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">err</span> <span class="token operator">=&gt;</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><p><strong>总结：</strong> 使用axios请求拦截器可以在请求前给请求头带上token</p> <h3 id="_07-概览-拦截token失效"><a href="#_07-概览-拦截token失效" class="header-anchor">#</a> 07-概览-拦截token失效</h3> <blockquote><p>目的：在token失效的时候拦截跳转到登录页面</p></blockquote> <p>大致步骤：</p> <ul><li>token在服务端是会去判断有效时间的，极客园的是2小时失效</li> <li>我们不能等两小时再来操作，可以在浏览器把token改成一个错误的，其实就是默认token失效。</li> <li>响应拦截器来根据401判断，分析示例代码</li> <li>完成token失效拦截</li></ul> <p>落地代码：<code>src/utils/http.js</code></p> <ul><li>分析-响应拦截器</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>// 添加响应拦截器
axios.interceptors.response.use(function (response) <span class="token punctuation">{</span>
    // 对响应数据做点什么
    return response;
  <span class="token punctuation">}</span>, function (error) <span class="token punctuation">{</span>
    // 对响应错误做点什么
    return Promise.reject(error);
  <span class="token punctuation">}</span>);
</code></pre></div><ul><li>使用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'@/router'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> res<span class="token punctuation">,</span> <span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 失效token</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">.</span>response <span class="token operator">&amp;&amp;</span> err<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">401</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    auth<span class="token punctuation">.</span><span class="token function">delToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p><strong>总结：</strong> 使用axios响应拦截器可以根据401响应状态码拦截token失效</p> <h3 id="_08-概览-退出功能"><a href="#_08-概览-退出功能" class="header-anchor">#</a> 08-概览-退出功能</h3> <blockquote><p>目的：失效退出登录</p></blockquote> <p>大致步骤：</p> <ul><li>本地删除token就是退出登录</li> <li>绑定按钮事件，事件中删除token跳转登录页面即可。</li></ul> <p>落地代码：<code>src/views/Layout.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logout()<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-unlock<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>退出<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> auth <span class="token keyword">from</span> <span class="token string">'@/utils/auth.js'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">logout</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      auth<span class="token punctuation">.</span><span class="token function">delToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div><h2 id="第五章-内容管理"><a href="#第五章-内容管理" class="header-anchor">#</a> 第五章：内容管理</h2> <h3 id="_01-内容管理-路由与组件"><a href="#_01-内容管理-路由与组件" class="header-anchor">#</a> 01-内容管理-路由与组件</h3> <p>组件：<code>src/views/article/index.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Article<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Article'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><p>路由：<code>src/router/index.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Article <span class="token keyword">from</span> <span class="token string">'@/views/article'</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     children: [
</span><span class="token prefix unchanged"> </span><span class="token line">       { path: '/', component: Home },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        { path: '/article', component: Article }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     ]
</span></span></code></pre></div><h3 id="_02-内容管理-开启菜单路由"><a href="#_02-内容管理-开启菜单路由" class="header-anchor">#</a> 02-内容管理-开启菜单路由</h3> <blockquote><p>目的：点击菜单进行路由跳转，刷新页面需要激活当前菜单。</p></blockquote> <p>大致步骤：</p> <ul><li>开启导航菜单路由功能</li> <li>刷新页面后保存激活状态</li></ul> <p>落地代码：<code>src/views/Layout.vue</code></p> <ul><li>开启导航菜单路由功能</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-menu
</span><span class="token prefix unchanged"> </span><span class="token line">       background-color=&quot;#023&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       style=&quot;border-right:none&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       text-color=&quot;#fff&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       default-active=&quot;/&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        router
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &gt;
</span></span></code></pre></div><p>加上router属性后，el-menu-item的index属性值就是跳转的路径</p> <ul><li>刷新页面后保存激活状态</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-menu
</span><span class="token prefix unchanged"> </span><span class="token line">       background-color=&quot;#023&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       style=&quot;border-right:none&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       text-color=&quot;#fff&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        :default-active=&quot;$route.path&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       router
</span><span class="token prefix unchanged"> </span><span class="token line">     &gt;
</span></span></code></pre></div><p><code>$route.path</code> 获取当前路由路径，设置给default-active属性，激活对应的el-menu-item菜单项。</p> <h3 id="_03-内容管理-筛选区域"><a href="#_03-内容管理-筛选区域" class="header-anchor">#</a> 03-内容管理-筛选区域</h3> <blockquote><p>目的：完成筛选区域布局</p></blockquote> <p>大致步骤：</p> <ul><li>准备基本结构</li> <li>添加-状态-单选框</li> <li>添加-频道-下拉框</li> <li>添加-时间-日期控件</li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <p>1）基本结构</p> <div class="language-vue extra-class"><pre class="language-vue"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>article-page<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 筛选区域 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-card</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb</span> <span class="token attr-name">separator-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-arrow-right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb-item</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ path: <span class="token punctuation">'</span>/<span class="token punctuation">'</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>内容管理<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 表单 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>状态：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>频道：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日期：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>筛选<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-card</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 结果区域 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>2）状态-单选框</p> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>状态：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reqParams.status<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>null<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>全部<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>草稿<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>待审核<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核通过<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核失败<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio-group</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token comment">// 提交给后台的参数</span>
      reqParams<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 默认值为null，使用axios提交的时候null值是不会传递的。</span>
        status<span class="token operator">:</span> <span class="token keyword">null</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div><p>3）频道-下拉框</p> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>频道：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reqParams.channel_id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span>
              <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in channelOptions<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> data () {
</span><span class="token prefix unchanged"> </span><span class="token line">   return {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 提交给后台的参数
</span><span class="token prefix unchanged"> </span><span class="token line">     reqParams: {
</span><span class="token prefix unchanged"> </span><span class="token line">       // 默认值为null，使用axios提交的时候null值是不会传递的。
</span><span class="token prefix unchanged"> </span><span class="token line">       status: null,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        channel_id: null
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     },
</span><span class="token prefix unchanged"> </span><span class="token line">     // 频道选项
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      channelOptions: [{ value: 1, label: '前端' }, { value: 2, label: 'java' }]
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span></code></pre></div><p>4）时间-日期控件</p> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日期：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-date-picker</span>
            <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dateArr<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>daterange<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">range-separator</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>至<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">start-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>开始日期<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">end-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>结束日期<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-date-picker</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> data () {
</span><span class="token prefix unchanged"> </span><span class="token line">   return {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 提交给后台的参数
</span><span class="token prefix unchanged"> </span><span class="token line">     reqParams: {
</span><span class="token prefix unchanged"> </span><span class="token line">       // 默认值为null，使用axios提交的时候null值是不会传递的。
</span><span class="token prefix unchanged"> </span><span class="token line">       status: null,
</span><span class="token prefix unchanged"> </span><span class="token line">       channel_id: null,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        begin_pubdate: null,
</span><span class="token prefix inserted">+</span><span class="token line">        end_pubdate: null
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     },
</span><span class="token prefix unchanged"> </span><span class="token line">     // 频道选项
</span><span class="token prefix unchanged"> </span><span class="token line">     channelOptions: [{ value: 1, label: '前端' }, { value: 2, label: 'java' }],
</span><span class="token prefix unchanged"> </span><span class="token line">     // 日期范围 [起始时间，结束时间]
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      dateArr: []
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span></code></pre></div><h3 id="_04-内容管理-结果区域"><a href="#_04-内容管理-结果区域" class="header-anchor">#</a> 04-内容管理-结果区域</h3> <blockquote><p>目的：完成结果区域布局</p></blockquote> <p>大致步骤：</p> <ul><li>基本布局</li> <li>分析表格组件</li> <li>绘制表格组件</li> <li>使用分页组件</li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <p>1）基本布局</p> <div class="language-html extra-class"><pre class="language-html"><code>    <span class="token comment">&lt;!-- 结果区域 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-card</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span>20px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>根据筛选条件共查询到 46148 条结果：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 表格 --&gt;</span>
      <span class="token comment">&lt;!-- 分页 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-card</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>2）分析表格组件</p> <p><img src="/document/assets/img/1625206748596.a8bb9064.png" alt="1625206748596"></p> <p>3）绘制表格组件</p> <ul><li>el-table 属性 data 接收表格数组数据，必填。</li></ul> <div class="language-html extra-class"><pre class="language-html"><code>      <span class="token comment">&lt;!-- 表格 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articles<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>封面<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标题<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>状态<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>发布时间<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>阅读数<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>评论数<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点赞数<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span> 
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>操作<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     dateArr: [],
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      articles: []
</span></span></code></pre></div><p>4）使用分页组件</p> <p><img src="/document/assets/img/1625206824788.bf771473.png" alt="1625206824788"></p> <div class="language-vue extra-class"><pre class="language-vue"><code>      <span class="token comment">&lt;!-- 分页 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-pagination</span>
        <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span>20px</span><span class="token punctuation">&quot;</span></span></span>
        <span class="token attr-name">background</span>
        <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>prev, pager, next<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:total</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-pagination</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_05-内容管理-渲染频道选项"><a href="#_05-内容管理-渲染频道选项" class="header-anchor">#</a> 05-内容管理-渲染频道选项</h3> <blockquote><p>目的：获取文章频道数据且进行渲染</p></blockquote> <p>大致步骤：</p> <ul><li>在mehtods中定义一个获取选项的函数 ，获取数据赋值给data中的选项</li> <li>在created中调用改函数即可</li> <li>渲染模版</li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <ul><li>获取选项函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">getChannelOptions</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'v1_0/channels'</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>channelOptions <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>channels
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div><ul><li>调用函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getChannelOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>渲染模版</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-form-item label=&quot;频道：&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-select v-model=&quot;reqParams.channel_id&quot; placeholder=&quot;请选择&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-option
</span><span class="token prefix unchanged"> </span><span class="token line">             v-for=&quot;item in channelOptions&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">              :key=&quot;item.id&quot;
</span><span class="token prefix inserted">+</span><span class="token line">              :label=&quot;item.name&quot;
</span><span class="token prefix inserted">+</span><span class="token line">              :value=&quot;item.id&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;/el-option&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;/el-select&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span></span></code></pre></div><h3 id="_06-内容管理-渲染简单列"><a href="#_06-内容管理-渲染简单列" class="header-anchor">#</a> 06-内容管理-渲染简单列</h3> <blockquote><p>目的：获取文章列表数据，渲染 标题，发布时间，阅读数，评论数，点赞数  5列。</p></blockquote> <p>大致步骤：</p> <ul><li>获取文章列表数据在组件初始化后</li> <li>渲染 标题，发布时间  两列，它们简单些</li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <ul><li>获取数据</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> data () {
</span><span class="token prefix unchanged"> </span><span class="token line">   return {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 提交给后台的参数
</span><span class="token prefix unchanged"> </span><span class="token line">     reqParams: {
</span><span class="token prefix unchanged"> </span><span class="token line">       // 默认值为null，使用axios提交的时候null值是不会传递的。
</span><span class="token prefix unchanged"> </span><span class="token line">       status: null,
</span><span class="token prefix unchanged"> </span><span class="token line">       channel_id: null,
</span><span class="token prefix unchanged"> </span><span class="token line">       begin_pubdate: null,
</span><span class="token prefix unchanged"> </span><span class="token line">       end_pubdate: null,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        page: 1,
</span><span class="token prefix inserted">+</span><span class="token line">        per_page: 10
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     },
</span></span></code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code>methods: {
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    async getArticles () {
</span><span class="token prefix inserted">+</span><span class="token line">      const res = await this.$http.get('v1_0/mp/articles', { params: this.reqParams })
</span><span class="token prefix inserted">+</span><span class="token line">      this.articles = res.data.data.results
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span></span></code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> created () {
</span><span class="token prefix unchanged"> </span><span class="token line">   this.getChannelOptions()
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    this.getArticles()
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> },
</span></span></code></pre></div><ul><li>渲染内容</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;!-- 表格 --&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-table :data=&quot;articles&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-table-column label=&quot;封面&quot;&gt;&lt;/el-table-column&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;el-table-column label=&quot;标题&quot; prop=&quot;title&quot; width=&quot;400px&quot;&gt;&lt;/el-table-column&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-table-column label=&quot;状态&quot;&gt;&lt;/el-table-column&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;el-table-column label=&quot;阅读数&quot; width=&quot;120px&quot; prop=&quot;read_count&quot;&gt;&lt;/el-table-column&gt;
</span><span class="token prefix inserted">+</span><span class="token line">        &lt;el-table-column label=&quot;评论数&quot; width=&quot;120px&quot; prop=&quot;comment_count&quot;&gt;&lt;/el-table-column&gt;
</span><span class="token prefix inserted">+</span><span class="token line">        &lt;el-table-column label=&quot;点赞数&quot;  width=&quot;120px&quot; prop=&quot;like_count&quot;&gt;&lt;/el-table-column&gt;
</span><span class="token prefix inserted">+</span><span class="token line">        &lt;el-table-column label=&quot;发布时间&quot; prop=&quot;pubdate&quot;&gt;&lt;/el-table-column&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-table-column label=&quot;操作&quot; width=&quot;120px&quot;&gt;&lt;/el-table-column&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-table&gt;
</span></span></code></pre></div><p><strong>总结：</strong>  使用el-table-column的prop属性指定当前列显示什么字段的数据</p> <h3 id="_07-内容管理-渲染复杂列"><a href="#_07-内容管理-渲染复杂列" class="header-anchor">#</a> 07-内容管理-渲染复杂列</h3> <blockquote><p>目的：渲染 封面，状态，操作  三列。</p></blockquote> <p>大致步骤：</p> <ul><li>参考element-ui文档，总结渲染自定义列套路</li> <li>渲染封面列</li> <li>渲染状态列</li> <li>渲染操作列</li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <ul><li>参考 https://element.eleme.cn/#/zh-CN/component/table#zi-ding-yi-lie-mo-ban</li></ul> <div class="language-tex extra-class"><pre class="language-tex"><code>1. 需要使用作用域插槽，暴露的数据 scope = <span class="token punctuation">{</span> <span class="token equation string">$index, row }
2. $</span>index 是遍历数组（articles）的索引
3. row 是遍历数组（articles）的每一项 （行数据）
</code></pre></div><ul><li>渲染封面</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>封面<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-image</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.cover.images[0]<span class="token punctuation">&quot;</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>150px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-slot<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@/assets/error.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-image</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>渲染状态列</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>状态<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.status===0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>草稿<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.status===1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>待审核<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.status===2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核通过<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.status===3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核失败<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.status===4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>渲染操作列</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>操作<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>120px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-edit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">circle</span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-delete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">circle</span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><img src="/document/assets/img/1625209403114.6dc83a46.png" alt="1625209403114"></p> <h3 id="_08-内容管理-实现分页功能"><a href="#_08-内容管理-实现分页功能" class="header-anchor">#</a> 08-内容管理-实现分页功能</h3> <blockquote><p>目标：完成分页渲染和切换功能</p></blockquote> <p>大致步骤：</p> <ul><li>准备总条数数据total</li> <li>完成分页渲染，通过分页组件提供的属性
<ul><li>total属性，指定一共多少条</li> <li>page-size属性，指定一页多少条</li> <li>current-page属性，指定当前是第几页</li></ul></li> <li>切换分页功能
<ul><li>current-change事件，触发事件得到当前改变的页码，通过页码去请求</li></ul></li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <p>1）total数据</p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     articles: [],
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      total: 0
</span></span></code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   async getArticles () {
</span><span class="token prefix unchanged"> </span><span class="token line">     const res = await this.$http.get('v1_0/mp/articles', { params: this.reqParams })
</span><span class="token prefix unchanged"> </span><span class="token line">     this.articles = res.data.data.results
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      this.total = res.data.data.total_count
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   },
</span></span></code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>根据筛选条件共查询到 {{total}} 条结果：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>2）完成分页渲染</p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;!-- 分页 --&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-pagination
</span><span class="token prefix unchanged"> </span><span class="token line">       style=&quot;margin-top:20px&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       background
</span><span class="token prefix unchanged"> </span><span class="token line">       layout=&quot;prev, pager, next&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        :current-page=&quot;reqParams.page&quot;
</span><span class="token prefix inserted">+</span><span class="token line">        :page-size=&quot;reqParams.per_page&quot;
</span><span class="token prefix inserted">+</span><span class="token line">        :total=&quot;total&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-pagination&gt;
</span></span></code></pre></div><p>3）切换分页</p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;!-- 分页 --&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;el-pagination
</span><span class="token prefix unchanged"> </span><span class="token line">       style=&quot;margin-top:20px&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       background
</span><span class="token prefix unchanged"> </span><span class="token line">       layout=&quot;prev, pager, next&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        @current-change=&quot;togglePage&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       :current-page=&quot;reqParams.page&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       :page-size=&quot;reqParams.per_page&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">       :total=&quot;total&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-pagination&gt;
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">togglePage</span> <span class="token punctuation">(</span><span class="token parameter">changedPage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>reqParams<span class="token punctuation">.</span>page <span class="token operator">=</span> changedPage
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getArticles</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><h3 id="_09-内容管理-实现筛选功能"><a href="#_09-内容管理-实现筛选功能" class="header-anchor">#</a> 09-内容管理-实现筛选功能</h3> <blockquote><p>目标：实现文章筛选功能</p></blockquote> <p>大致步骤：<code>src/views/article/index.vue</code></p> <ul><li>绑定筛选按钮的点击事件，指定处理函数。</li> <li>需要带上筛选条件进行查询，而且页码需要变成第一页，发请求渲染列表即可。
<ul><li>页码第一页，this.reqParams.page = 1 搞定</li> <li>双向绑定reqParams的条件不用管，只要改动了，reqParams中已经变化。
<ul><li>状态 status</li> <li>频道 channel_id</li></ul></li> <li>两个条件 begin_pubdate end_pubdate 需要在时间范围选择之后，给他们赋值。</li></ul></li> <li>频道选项需要清空。</li></ul> <p>落地代码：</p> <ul><li>筛选函数</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filterArticles()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>筛选<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">filterArticles</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>reqParams<span class="token punctuation">.</span>page <span class="token operator">=</span> <span class="token number">1</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getArticles</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>日期条件</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-date-picker
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">           @change=&quot;changeDate&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           v-model=&quot;dateArr&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">           type=&quot;daterange&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">           range-separator=&quot;至&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">           start-placeholder=&quot;开始日期&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">           end-placeholder=&quot;结束日期&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;/el-date-picker&gt;
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">changeDate</span> <span class="token punctuation">(</span><span class="token parameter">dateArr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 日期访问改变后给reqParams中的日期赋值</span>
      <span class="token comment">// dateArr 选择日期后 [start,end]</span>
      <span class="token comment">// dateArr 用户做清空 null</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>dateArr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>reqParams<span class="token punctuation">.</span>begin_pubdate <span class="token operator">=</span> dateArr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>reqParams<span class="token punctuation">.</span>end_pubdate <span class="token operator">=</span> dateArr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>reqParams<span class="token punctuation">.</span>begin_pubdate <span class="token operator">=</span> <span class="token keyword">null</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>reqParams<span class="token punctuation">.</span>end_pubdate <span class="token operator">=</span> <span class="token keyword">null</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>频道清空</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;el-select  clearable v-model=&quot;reqParams.channel_id&quot; placeholder=&quot;请选择&quot; &gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-option
</span><span class="token prefix unchanged"> </span><span class="token line">             v-for=&quot;item in channelOptions&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :key=&quot;item.id&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :label=&quot;item.name&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :value=&quot;item.id&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;/el-option&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;/el-select&gt;
</span></span></code></pre></div><h3 id="_10-内容管理-实现删除功能"><a href="#_10-内容管理-实现删除功能" class="header-anchor">#</a> 10-内容管理-实现删除功能</h3> <blockquote><p>目的：实现文章删除功能</p></blockquote> <p>大致步骤：</p> <ul><li>给删除按钮绑定点击事件，指定处理函数，把文章ID传递给函数。</li> <li>弹出一个确认框，标题：<code>温馨提示</code>，内容：<code>此操作将永久删除该文章, 是否继续?</code></li> <li>点击确认的时候，发送删除请求，删除成功之后，更新当前列表。</li></ul> <p>落地代码：<code>src/views/article/index.vue</code></p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;template slot-scope=&quot;scope&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-edit&quot; circle plain&gt;&lt;/el-button&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">           &lt;el-button @click=&quot;deleteArticle(scope.row.id)&quot;  type=&quot;danger&quot; icon=&quot;el-icon-delete&quot; circle plain&gt;&lt;/el-button&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         &lt;/template&gt;
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">deleteArticle</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$confirm</span><span class="token punctuation">(</span><span class="token string">'此操作将永久删除该文章, 是否继续?'</span><span class="token punctuation">,</span> <span class="token string">'温馨提示'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        confirmButtonText<span class="token operator">:</span> <span class="token string">'确定'</span><span class="token punctuation">,</span>
        cancelButtonText<span class="token operator">:</span> <span class="token string">'取消'</span><span class="token punctuation">,</span>
        type<span class="token operator">:</span> <span class="token string">'warning'</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 发送删除请求</span>
        <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">v1_0/mp/articles/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token comment">// 删除成功</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'删除文章成功'</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getArticles</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 取消不做任何事情</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><h2 id="第六章-发布文章"><a href="#第六章-发布文章" class="header-anchor">#</a> 第六章：发布文章</h2> <h3 id="_01-发布文章-路由与组件"><a href="#_01-发布文章-路由与组件" class="header-anchor">#</a> 01-发布文章-路由与组件</h3> <p>组件：<code>src/views/publish/index.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>publish<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Publish<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Publish'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><p>路由：<code>src/router/index.vue</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Publish <span class="token keyword">from</span> <span class="token string">'@/views/publish'</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     children: [
</span><span class="token prefix unchanged"> </span><span class="token line">       { path: '/', component: Home },
</span><span class="token prefix unchanged"> </span><span class="token line">       { path: '/article', component: Article },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        { path: '/publish', component: Publish }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     ]
</span></span></code></pre></div><h3 id="_02-发布文章-基础布局"><a href="#_02-发布文章-基础布局" class="header-anchor">#</a> 02-发布文章-基础布局</h3> <blockquote><p>目的：完成发布文章基础布局</p></blockquote> <p>大致步骤：</p> <ul><li>卡片容器 el-card
<ul><li>头部，面板屑</li> <li>内容，表单组件 el-form
<ul><li>标题 el-input</li> <li>频道 封装频道组件（空）</li> <li>封面 el-radio 单选框 + 上传组件（空）</li> <li>内容 富文本组件（空）</li> <li>按钮</li></ul></li></ul></li></ul> <p>落地代码：</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>publish-page<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-card</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb</span> <span class="token attr-name">separator-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-arrow-right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb-item</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ path: <span class="token punctuation">'</span>/<span class="token punctuation">'</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>发布文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 表单 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>120px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标题：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入文章标题<span class="token punctuation">&quot;</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>400px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>频道：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>频道组件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>封面：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.cover.type<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>单图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>三图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>无图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-radio</span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>自动<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-radio-group</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>上传组件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>内容：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>富文本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发布文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>存入草稿<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-card</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'PublishPage'</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token comment">// 表单数据</span>
      articleForm<span class="token operator">:</span> <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
        content<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
        cover<span class="token operator">:</span> <span class="token punctuation">{</span>
          type<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          images<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        channel_id<span class="token operator">:</span> <span class="token keyword">null</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>less<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_03-发布文章-频道组件-功能实现"><a href="#_03-发布文章-频道组件-功能实现" class="header-anchor">#</a> 03-发布文章-频道组件-功能实现</h3> <blockquote><p>目的：实现频道组件默认功能，能选择即可。</p></blockquote> <p>大致步骤：</p> <ul><li>在components中新建一个组件，实现频道下拉选择功能。</li> <li>在main.js中注册为一个全局组件。</li> <li>在内容管理，发布文章，使用这个组件。</li></ul> <p>落地代码：</p> <ul><li>定义组件 <code>src/components/my-channel.vue</code></li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span>
    <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channelId<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">clearable</span>
  <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in channelOptions<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.name<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'MyChannel'</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      channelId<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      channelOptions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getChannelOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">getChannelOptions</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/v1_0/channels'</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>channelOptions <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>channels
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>less<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>注册组件 <code>src/main.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 注册全局组件</span>
<span class="token keyword">import</span> MyChannel <span class="token keyword">from</span> <span class="token string">'@/components/my-channel'</span>
Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>MyChannel<span class="token punctuation">.</span>name<span class="token punctuation">,</span> MyChannel<span class="token punctuation">)</span>
</code></pre></div><ul><li>使用组件</li></ul> <p><code>src/views/article.vue</code></p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-form-item label=&quot;频道：&quot;&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;my-channel&gt;&lt;/my-channel&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span></span></code></pre></div><p><strong>总结：</strong> 这样只是封装了功能，数据还需要实现双向数据绑定。</p> <h3 id="_04-发布文章-频道组件-双向绑定"><a href="#_04-发布文章-频道组件-双向绑定" class="header-anchor">#</a> 04-发布文章-频道组件-双向绑定</h3> <blockquote><p>目的：实现频道组件双向数据绑定功能，支持v-model指令。</p></blockquote> <p>大致步骤：</p> <ul><li><p>回顾父子传值，以及v-model语法糖</p> <ul><li>父组件传递子组件：父 <code>:value=&quot;count&quot;</code>    ----&gt;   子 <code>props:['value']</code></li> <li>子组件传递父组件：子 <code>$emit('input', 100)</code>  ----&gt;   父 <code>@input=&quot;count=$event&quot;</code></li> <li>然而 <code>&lt;my-com :value=&quot;count&quot; @input=&quot;count=$event&quot; &gt;&lt;/my-com&gt;</code>  是可以简写成
<ul><li><code>&lt;my-com v-model=&quot;count&quot;&gt;&lt;/my-com&gt;</code>  基于v-model语法糖原理</li></ul></li></ul></li> <li><p>频道ID父传子</p></li> <li><p>频道ID子传父</p></li> <li><p>使用v-model绑定频道ID</p></li></ul> <p>落地代码：</p> <ol><li>父传子</li></ol> <ul><li>父组件</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-channel</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reqParams.channel_id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-channel</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>子组件</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> // props接收的数据，特点：只读
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  props: ['value'],
</span></span></code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &lt;el-select
</span><span class="token prefix unchanged"> </span><span class="token line">   @change=&quot;changeChannel&quot;
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    v-model=&quot;channeId&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    :value=&quot;value&quot;
</span></span></code></pre></div><ol start="2"><li>子传父</li></ol> <ul><li>父组件</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-channel</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reqParams.channel_id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reqParams.channel_id=$event<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-channel</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>子组件</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> data () {
</span><span class="token prefix unchanged"> </span><span class="token line">   return {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      // channelId: null,
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     channelOptions: []
</span><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> },
</span><span class="token prefix unchanged"> </span><span class="token line"> created () {
</span><span class="token prefix unchanged"> </span><span class="token line">   this.getChannelOptions()
</span><span class="token prefix unchanged"> </span><span class="token line"> },
</span><span class="token prefix unchanged"> </span><span class="token line"> methods: {
</span><span class="token prefix unchanged"> </span><span class="token line">   changeChannel (changedChannelId) {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 通知父组件，频道ID已变化，你也需要改变
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      this.$emit('input', changedChannelId)
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   },
</span></span></code></pre></div><ol start="3"><li>v-model的使用</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>频道：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!-- 使用my-channel.vue组件 --&gt;</span>
          <span class="token comment">&lt;!-- &lt;my-channel :value=&quot;reqParams.channel_id&quot; @input=&quot;reqParams.channel_id=$event&quot;&gt;&lt;/my-channel&gt; --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-channel</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reqParams.channel_id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-channel</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>4）发布文章中使用组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>频道：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-channel</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.channel_id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-channel</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.el-select</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>axios传参：后端提供接口</p> <ul><li>地址?后键值对  <code>query</code>    对应axios  <code>axios({params:参数对象})</code> <code>axios.get(url,{params:参数对象})</code></li> <li>请求体传参 <code>body</code>  对应axios <code>axios({data:参数对象})</code> <code>axios.post(url, 参数对象)</code>  put patch</li> <li>地址/后参数  <code>路径参数</code>   对应axios  <code>axios({url:'进行拼接'})</code></li> <li>请求头参数  <code>headers</code> 对应axios <code>axios({headers:参数对象})</code></li></ul> <h3 id="_05-发布文章-封面-上传组件"><a href="#_05-发布文章-封面-上传组件" class="header-anchor">#</a> 05-发布文章-封面-上传组件</h3> <blockquote><p>目的：使用上传组件完成上传图片位置布局和交互</p></blockquote> <p>大致步骤：</p> <ul><li>查看element-ui文档找到el-upload组件照片墙示例，分析代码</li> <li>使用el-upload组件</li> <li>完成根据封面图类型切换组件形态</li></ul> <p>落地代码：</p> <ul><li>一张图，三张图才使用组件，上传图片的限制和type的值一致。</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.cover.type===1||articleForm.cover.type===3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-upload</span>
              <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://jsonplaceholder.typicode.com/posts/<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">list-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picture-card<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">:limit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.cover.type<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-plus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-upload</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>当类型修改的时候，需要重置选择的图片</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;el-radio-group @change=&quot;changeCoverType()&quot; v-model=&quot;articleForm.cover.type&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;1&quot;&gt;单图&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;3&quot;&gt;三图&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;0&quot;&gt;无图&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;-1&quot;&gt;自动&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;/el-radio-group&gt;
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">changeCoverType</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>upload <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>upload<span class="token punctuation">.</span><span class="token function">clearFiles</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>修改样式，上传组件动画</li></ul> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">::v-deep .el-upload-list__item</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>总结：</strong>  能够基本使用el-upload组件完成上传图片的布局和交互</p> <h3 id="_06-发布文章-封面-完成上传"><a href="#_06-发布文章-封面-完成上传" class="header-anchor">#</a> 06-发布文章-封面-完成上传</h3> <blockquote><p>目的：调用后台接口完成上传和数据保存</p></blockquote> <p>大致步骤：</p> <ul><li>阅读接口文档得到：地址，参数，返回数据</li> <li>找到el-upload组件设置 地址，参数，请求头，的属性并且设置</li> <li>找到el-upload组件设置 上传成功函数，处理成功后的逻辑</li></ul> <p>落地代码：</p> <ul><li>配置请求地址，参数，请求头</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-upload
</span><span class="token prefix unchanged"> </span><span class="token line">             ref=&quot;upload&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">              :action=&quot;`${$http.defaults.baseURL}v1_0/upload`&quot;
</span><span class="token prefix inserted">+</span><span class="token line">              name=&quot;image&quot;
</span><span class="token prefix inserted">+</span><span class="token line">              :headers=&quot;{Authorization: `Bearer ${token}`}&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">             list-type=&quot;picture-card&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :limit=&quot;articleForm.cover.type&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">           &gt;
</span><span class="token prefix unchanged"> </span><span class="token line">             &lt;i class=&quot;el-icon-plus&quot;&gt;&lt;/i&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;/el-upload&gt;
</span></span></code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code>// data 中数据
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      token: auth.getToken()
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> auth <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
</code></pre></div><ul><li>配置上传成功函数，处理数据</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-upload
</span><span class="token prefix unchanged"> </span><span class="token line">             ref=&quot;upload&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :action=&quot;`${$http.defaults.baseURL}v1_0/upload`&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             name=&quot;image&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :headers=&quot;{Authorization: `Bearer ${token}`}&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             list-type=&quot;picture-card&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :limit=&quot;articleForm.cover.type&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">              :on-success=&quot;uploadSuccess&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &gt;
</span><span class="token prefix unchanged"> </span><span class="token line">             &lt;i class=&quot;el-icon-plus&quot;&gt;&lt;/i&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;/el-upload&gt;
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">uploadSuccess</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span>cover<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><p>切换类型清理数据</p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   changeCoverType () {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      this.articleForm.cover.images = []
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     this.$refs.upload &amp;&amp; this.$refs.upload.clearFiles()
</span><span class="token prefix unchanged"> </span><span class="token line">   },
</span></span></code></pre></div><h3 id="_07-发布文章-富文本使用"><a href="#_07-发布文章-富文本使用" class="header-anchor">#</a> 07-发布文章-富文本使用</h3> <blockquote><p>目的：掌握在vue项目中使用富文本。</p></blockquote> <p>大致步骤：</p> <ul><li>找到我们需要的富文本组件</li> <li>安装</li> <li>注册</li> <li>使用</li></ul> <p>落地代码：</p> <ul><li><p>vue项目中使用富文本：</p> <ul><li>https://github.com/vuejs/awesome-vue 找vue相关的技术</li> <li>https://github.com/surmon-china/vue-quill-editor 富文本编辑器</li></ul></li> <li><p>安装</p></li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> vue-quill-editor
</code></pre></div><ul><li>局部注册</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import 'quill/dist/quill.core.css'
</span><span class="token prefix inserted">+</span><span class="token line">import 'quill/dist/quill.snow.css'
</span><span class="token prefix inserted">+</span><span class="token line">import 'quill/dist/quill.bubble.css'
</span></span>
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { quillEditor } from 'vue-quill-editor'
</span></span>export default {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> name: 'PostPage',
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  components: { quillEditor },
</span></span></code></pre></div><ul><li>使用</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>内容：<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>quill-editor</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.content<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editorOption<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> data () {
</span><span class="token prefix unchanged"> </span><span class="token line">   return {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 表单数据
</span><span class="token prefix unchanged"> </span><span class="token line">     articleForm: {
</span><span class="token prefix unchanged"> </span><span class="token line">       title: null,
</span><span class="token prefix unchanged"> </span><span class="token line">       content: null,
</span><span class="token prefix unchanged"> </span><span class="token line">       cover: {
</span><span class="token prefix unchanged"> </span><span class="token line">         type: 1,
</span><span class="token prefix unchanged"> </span><span class="token line">         images: []
</span><span class="token prefix unchanged"> </span><span class="token line">       },
</span><span class="token prefix unchanged"> </span><span class="token line">       channel_id: null
</span><span class="token prefix unchanged"> </span><span class="token line">     },
</span><span class="token prefix unchanged"> </span><span class="token line">     // 富文本配置
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      editorOption: {}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span></code></pre></div><div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">::v-deep .ql-editor</span> <span class="token punctuation">{</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_08-发布文章-基本校验"><a href="#_08-发布文章-基本校验" class="header-anchor">#</a> 08-发布文章-基本校验</h3> <blockquote><p>目的：完成发布文章表单的基本校验功能</p></blockquote> <p>大致步骤：</p> <ul><li>绑定表单数据对象和校验规则对象</li> <li>准备校验规则对象中具体的规则，</li> <li>通过prop给表单项添加校验</li></ul> <p>落地代码：</p> <ul><li>校验规则对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>      <span class="token comment">// 校验规则</span>
      articleRules<span class="token operator">:</span> <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'请输入文章标题'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'文章标题4-50字符'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        cover<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token comment">// 需要自定义</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        channel_id<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'请选择文章频道'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'change'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        content<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'请输入文章内容'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>使用校验规则</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     &lt;!-- 表单 --&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      &lt;el-form label-width=&quot;120px&quot; :model=&quot;articleForm&quot; :rules=&quot;articleRules&quot;&gt;
</span><span class="token prefix inserted">+</span><span class="token line">        &lt;el-form-item label=&quot;标题：&quot; prop=&quot;title&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-input v-model=&quot;articleForm.title&quot; placeholder=&quot;请输入文章标题&quot; style=&quot;width:400px&quot;&gt;&lt;/el-input&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;el-form-item label=&quot;频道：&quot; prop=&quot;channel_id&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         &lt;my-channel v-model=&quot;articleForm.channel_id&quot;&gt;&lt;/my-channel&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;el-form-item label=&quot;封面：&quot; prop=&quot;cover&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-radio-group @change=&quot;changeCoverType()&quot; v-model=&quot;articleForm.cover.type&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;1&quot;&gt;单图&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;3&quot;&gt;三图&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;0&quot;&gt;无图&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-radio :label=&quot;-1&quot;&gt;自动&lt;/el-radio&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;/el-radio-group&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;div v-if=&quot;articleForm.cover.type===1||articleForm.cover.type===3&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-upload
</span><span class="token prefix unchanged"> </span><span class="token line">             ref=&quot;upload&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             action=&quot;https://jsonplaceholder.typicode.com/posts/&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             name=&quot;image&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :headers=&quot;{Authorization: `Bearer ${token}`}&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             list-type=&quot;picture-card&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :limit=&quot;articleForm.cover.type&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :on-success=&quot;uploadSuccess&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">           &gt;
</span><span class="token prefix unchanged"> </span><span class="token line">             &lt;i class=&quot;el-icon-plus&quot;&gt;&lt;/i&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;/el-upload&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;/div&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;el-form-item label=&quot;内容：&quot; prop=&quot;content&quot;&gt;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">         &lt;quill-editor v-model=&quot;articleForm.content&quot; :options=&quot;editorOption&quot;/&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;el-form-item label=&quot;&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-button type=&quot;primary&quot;&gt;发布文章&lt;/el-button&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">         &lt;el-button&gt;存入草稿&lt;/el-button&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;/el-form-item&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/el-form&gt;
</span></span></code></pre></div><p><strong>总结：</strong> 还是按照表单校验的套路完成基本的校验功能。</p> <h3 id="_09-发布文章-特殊校验"><a href="#_09-发布文章-特殊校验" class="header-anchor">#</a> 09-发布文章-特殊校验</h3> <blockquote><p>目的：完成特殊表单项的校验，封面图，富文本。</p></blockquote> <p>大致步骤：</p> <ul><li>完成 文章内容 校验</li> <li>完成 封面图 校验</li></ul> <p>落地代码：</p> <ul><li>完成 文章内容 校验</li></ul> <div class="language-JS extra-class"><pre class="language-js"><code>  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">checkContent</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 校验内容表单项</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span><span class="token function">validateField</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-VUE extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>内容：<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>quill-editor</span> <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkContent()<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>articleForm.content<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editorOption<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;el-form ref=&quot;articleForm&quot; :model=&quot;articleForm&quot; :rules=&quot;articleRules&quot; label-width=&quot;120px&quot;&gt;
</span></span></code></pre></div><ul><li>完成 封面图 校验</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token comment">// 自定义校验规则</span>
    <span class="token keyword">const</span> <span class="token function-variable function">checkCoverFn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> cb</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// 自己对value进行校验</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token function">cb</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'请选择一张封面图'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span>value<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> value<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> value<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token function">cb</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'请选择三张封面图'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token comment">// 代码走到这，校验成功</span>
      <span class="token function">cb</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>        cover<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> validator<span class="token operator">:</span> checkCoverFn<span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'change'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   // 上传图片成功
</span><span class="token prefix unchanged"> </span><span class="token line">   uploadSuccess (res) {
</span><span class="token prefix unchanged"> </span><span class="token line">     // res就是响应数据
</span><span class="token prefix unchanged"> </span><span class="token line">     this.articleForm.cover.images.push(res.data.url)
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      // 触发一次校验
</span><span class="token prefix inserted">+</span><span class="token line">      this.$refs.articleForm.validateField('cover')
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }
</span></span></code></pre></div><ul><li>边界情况：删除的时候需要删除数据还需要进行校验，三张图上传成功切换一张图（清空了图片数据）加一次校验。</li></ul> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">           &lt;el-upload
</span><span class="token prefix unchanged"> </span><span class="token line">             ref=&quot;upload&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :action=&quot;$http.defaults.baseURL+'v1_0/upload'&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             name=&quot;image&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :headers=&quot;{Authorization: `Bearer ${token}`}&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :limit=&quot;articleForm.cover.type&quot;
</span><span class="token prefix unchanged"> </span><span class="token line">             :on-success=&quot;uploadSuccess&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">              :on-remove=&quot;removeFile&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">             list-type=&quot;picture-card&quot;&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">             &lt;i class=&quot;el-icon-plus&quot;&gt;&lt;/i&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">           &lt;/el-upload&gt;
</span></span></code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>    <span class="token comment">// 删除文件</span>
    <span class="token function">removeFile</span> <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 主动：删除images数组中对应的图片</span>
      <span class="token comment">// file 中保存了之前上传图片响应的信息 response.data.url 图片地址</span>
      <span class="token comment">// 根据这个图片地址找到images对应的索引，通过splice(索引,1) 删除图片</span>
      <span class="token keyword">const</span> index <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span>cover<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item <span class="token operator">===</span> file<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span>cover<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
      <span class="token comment">// 自己再次校验</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span><span class="token function">validateField</span><span class="token punctuation">(</span><span class="token string">'cover'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   // 切换封面类型
</span><span class="token prefix unchanged"> </span><span class="token line">   changeCoverType () {
</span><span class="token prefix unchanged"> </span><span class="token line">     // 重置数据
</span><span class="token prefix unchanged"> </span><span class="token line">     this.articleForm.cover.images = []
</span><span class="token prefix unchanged"> </span><span class="token line">     // 重置组件
</span><span class="token prefix unchanged"> </span><span class="token line">     this.$refs.upload &amp;&amp; this.$refs.upload.clearFiles()
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      // 自己再次校验
</span><span class="token prefix inserted">+</span><span class="token line">      this.$refs.articleForm.validateField('cover')
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   },
</span></span></code></pre></div><p><strong>总结：</strong>  遇到校验规则需要自定义使用 validator 配置，遇到非element-ui表单组件自己触发校验方法。</p> <h3 id="_10-发布文章-进行提交"><a href="#_10-发布文章-进行提交" class="header-anchor">#</a> 10-发布文章-进行提交</h3> <blockquote><p>目的：能够完成发布文章功能</p></blockquote> <p>大致步骤：</p> <ul><li>绑定 发布文章  和  存入草稿  按钮点击事件，传入不同标识区别操作</li> <li>再函数中先校验整体表单，通过后发送请求</li> <li>成功：提示，跳转列表</li> <li>失败：提示</li></ul> <p>落地代码：</p> <ul><li>绑定事件</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit(false)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发布文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit(true)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>存入草稿<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>提交函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">submit</span> <span class="token punctuation">(</span><span class="token parameter">draft</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">valid</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/v1_0/mp/articles?draft='</span> <span class="token operator">+</span> draft<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'发布成功'</span><span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/article'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'发布失败'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><h3 id="_11-修改文章-填充数据"><a href="#_11-修改文章-填充数据" class="header-anchor">#</a> 11-修改文章-填充数据</h3> <blockquote><p>目的：当你是进入编辑文件页面，获取文章详情，填充表单，修改标题和按钮。</p></blockquote> <p>大致步骤：</p> <ul><li>文章管理页面添加跳转逻辑代码，带上文章ID跳转到文章编辑</li> <li>从文章管理进入文章编辑，组件初始化的时候，判断是否有ID，获取文章详情数据，填充表单</li> <li>切换标题，和操作按钮</li></ul> <p>落地代码：</p> <p><code>src/views/article/index.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$router.push(<span class="token punctuation">'</span>/publish?id=<span class="token punctuation">'</span>+scope.row.id)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-edit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">circle</span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>src/views/publish/index.vue</code></p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getArticle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">getArticle</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/v1_0/mp/articles/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>{{$route.query.id?'修改':'发布'}}文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$route.query.id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>修改文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>存入草稿<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit(false)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发布文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit(true)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>存入草稿<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>填充图片</p> <div class="language-diff extra-class"><pre class="language-diff"><code>:file-list=&quot;fileList&quot;
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token function">fileList</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span>cover<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=&gt;</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token operator">:</span>item<span class="token punctuation">,</span>url<span class="token operator">:</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span> 
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_12-修改文章-路由组件钩子"><a href="#_12-修改文章-路由组件钩子" class="header-anchor">#</a> 12-修改文章-路由组件钩子</h3> <blockquote><p>目的：在由编辑切换发布组件不会初始化，可以使用路由组件钩子</p></blockquote> <p>大致步骤：</p> <ul><li>地址栏参数变化，路径不变化，对应的组件不会重新初始化。</li> <li>我们使用 <code>beforeRouteUpdate</code> 来监听，编辑和发布 之间的切换。</li> <li>在钩子函数中根据将要切换的地址，ID就填充表单，没有就重置表单。</li></ul> <p>落地代码：</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getArticle</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>总结：</p> <ul><li>何时地址变化不会初始化组件？参数变化，路径不变</li> <li>如何监听路由参数的变化？<code>beforeRouteUpdate</code> 或者  watch也行</li></ul> <h3 id="_13-修改文章-进行修改"><a href="#_13-修改文章-进行修改" class="header-anchor">#</a> 13-修改文章-进行修改</h3> <blockquote><p>目的：完成文章的修改</p></blockquote> <ul><li>大致步骤：
<ul><li>绑定 发布文章  和  存入草稿  按钮点击事件，传入不同标识区别操作</li> <li>再函数中先校验整体表单，通过后发送请求</li> <li>成功：提示，跳转列表</li> <li>失败：提示</li></ul></li></ul> <p>落地代码：</p> <ul><li>绑定事件</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>        <span class="token operator">&lt;</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item label<span class="token operator">=</span><span class="token string">&quot;&quot;</span> v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;$route.query.id&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>el<span class="token operator">-</span>button @click<span class="token operator">=</span><span class="token string">&quot;update(false)&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;primary&quot;</span><span class="token operator">&gt;</span>修改文章<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>el<span class="token operator">-</span>button @click<span class="token operator">=</span><span class="token string">&quot;update(true)&quot;</span><span class="token operator">&gt;</span>存入草稿<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item<span class="token operator">&gt;</span>
</code></pre></div><ul><li>进行修改</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token function">update</span> <span class="token punctuation">(</span><span class="token parameter">draft</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>articleForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">valid</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'/v1_0/mp/articles/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id <span class="token operator">+</span> <span class="token string">'?draft='</span> <span class="token operator">+</span> draft<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>articleForm<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'修改成功'</span><span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/article'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'修改失败'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><h2 id="第七章-项目收尾"><a href="#第七章-项目收尾" class="header-anchor">#</a> 第七章：项目收尾</h2> <h3 id="_01-项目打包"><a href="#_01-项目打包" class="header-anchor">#</a> 01-项目打包</h3> <blockquote><p>目的：能够打包项目启动托管服务，通过路由懒加载优化首屏加载速度。</p></blockquote> <p>大致步骤：</p> <ul><li>先做一次简单的打包</li> <li>然后做项目文件托管</li> <li>最后优化下首屏加载</li></ul> <p>落地代码：</p> <ul><li>先做一次简单的打包</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run build
</code></pre></div><ul><li>然后做项目文件托管 <code>npm i serve -g</code></li></ul> <p>安装 <code>serve</code> 工具，在 <code>dist</code> 目录执行  <code>serve</code>  通过 <code>http:localhost:5000</code> 访问</p> <ul><li>最后优化下首屏加载 <code>src/router/index.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">Login</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/login'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">Layout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/Layout'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/home'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">Article</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/article'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">Publish</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/publish'</span><span class="token punctuation">)</span>
</code></pre></div><p>路由懒加载：访问 /login 路由，只去加载登录对应的资源</p> <h3 id="_02-项目总结"><a href="#_02-项目总结" class="header-anchor">#</a> 02-项目总结</h3> <blockquote><p>总结： 项目中重点内容。</p></blockquote> <ul><li>使用vue-cli创建项目</li> <li>element-ui需要会用</li> <li>vue-router需要会用</li> <li>axios需要会用，配置，拦截器</li> <li>登录模块，校验需要使用</li> <li>首页模块，导航菜单</li> <li>内容管理，筛选，列表，一套实现</li> <li>发布文章，频道组件封装，合并修改</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/document/assets/js/app.9911b446.js" defer></script><script src="/document/assets/js/3.5cec4c48.js" defer></script><script src="/document/assets/js/5.3db35feb.js" defer></script>
  </body>
</html>
